<!--
 * @Description: 
 * @Author: chaixinyu
 * @Date: 2022-12-25 16:55:14
 * @LastEditors: 47
 * @LastEditTime: 2023-01-07 21:09:02
-->
<template>
  <div class="this-chapter">

    <!-- 章节 -->
    <van-nav-bar
      class="nav-bar"
      title="章节"
      right-text="讨论"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <!-- 章节标题 -->
    <div class="chapter-headline">{{index}} {{chapterDetail.chapter_title}}</div>
    <SpecificTask :detailList="chapterDetail.detailList"/>
    
  </div>
</template>

<script setup>
// 引入vant
import { NavBar} from 'vant';
// 引入路由
import {useRouter,useRoute} from 'vue-router'
// 引入仓库
import { useCourseStore } from '@/stores/course'
import { computed, onMounted } from '@vue/runtime-core'
import { storeToRefs } from 'pinia'

// 创建路由对象
const router = useRouter()
const route = useRoute()

const chapterId =  route.query.chapterId
const index =  route.query.index

//实例化仓库对象
const course = useCourseStore()
//解构方法
const { getChapterDetail,updateChapterTaskPoint } = course
//解构数据(如果想要处理响应式数据，使用storeToRefs)
const { chapterDetail } = storeToRefs(course)

const detailListArr = computed (() => {
  return chapterDetail.value.detailList || []
})

const updateChapterStatus = () => {
  let allOne = detailListArr.value.every(item => item.detail_status == 1)
  // console.log(chapterDetail.value);
  if (allOne) {
    updateChapterTaskPoint(chapterId,1)
  }
}


onMounted(async () => {
  //页面挂载完毕后
  await getChapterDetail(chapterId,1)
  updateChapterStatus()
})


// 点击左侧箭头返回上一页
const onClickLeft = () => history.back();
// 点击➕弹出
const onClickRight = () => {
  router.push('/coursediscussion')
};
</script>

<style lang="less" scoped>
.this-chapter{
  overflow: hidden;
  
  :deep(.van-icon ){
      color: black;
    }
  .van-nav-bar {
    width: 100%;
    position: fixed;
    
    .van-nav-bar__text{
      font-family: "Calibri";
      font-size: 13px;
      font-weight: 500;
      color: rgb(79, 185, 253) ;
    }
  }

  .chapter-headline{
    margin-top: 46px;
    padding: 10px;
    font-size: 14px;
  }
}

</style>
